<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common/swiper/swiper.min.css"/>
    <style>
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        html,body{
            background-color: white;
        }
        #header {
            width: 100%;
            height: 1.30rem;
            background-size: 3.75rem auto;
            background-image: url(../../image/inquiry/infoHeaderBackground.png);
            margin-bottom: 0.20rem;
        }
        #master-image {
            width: 0.80rem;
            height: 0.80rem;
            border-radius: 0.40rem;
            background-size: 0.80rem 0.80rem;
            margin-left: 0.20rem;
            margin-right: 0.16rem;
        }
        .time-icon {
            width: 0.12rem;
            height: 0.12rem;
            background-size: 0.12rem 0.12rem;
            margin-right: 0.08rem;
            background-image: url(../../image/inquiry/time-icon-2.png);
        }
        .title-block {
            width: 3.43rem;
            height: 0.44rem;
            background-size: 3.43rem 0.44rem;
            background-image: url(../../image/inquiry/title-background.png);
        }
        .master-skill {
            padding-left: 0.19rem;
            padding-right: 0.19rem;
            height: 0.30rem;
            border-radius: 0.04rem;
            background-color: #F6F3F3;
            font-size: 0.16rem;
            line-height: 0.30rem;
            color: #643332;
            text-align: center;
            margin-left: 0.10rem;
            margin-right: 0.10rem;
        }
        .block {
            background-size: 3.43rem 1.33rem;
            background-image: url(../../image/inquiry/block-background.png);
            background-repeat: no-repeat;
            background-position: center bottom;
        }
        .article-text {
            margin-top: 0.08rem;
            font-size: 0.12rem;
            line-height: 0.17rem;
            color: #28354C;
            white-space:wrap;
            text-overflow:ellipsis;
            overflow:hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            word-break:break-all;
            -webkit-line-clamp: 2; /* 控制显示的行数 */
        }
        .not-active {
            display: none;
        }
    </style>
</head>
<body>
    <div id="header" class="flex" style="flex-wrap: wrap;">
        <div class="flex" style="width: 100%;">
            <div class="flex" style="width: 0.52rem; height: 0.36rem; justify-content: center; align-items: center;" tapmode onclick="api.closeWin();">
                <div style="width: 0.20rem; height: 0.20rem; background-size: 0.20rem 0.20rem; background-image: url('../../image/inquiry/arrow01.png')"></div>
            </div>
        </div>
        <div class="flex" style="height: 0.80rem; align-items: center;">
            <div id="master-image"></div>
            <div style="width: 2.40rem; height: 0.77rem">
                <p id="master-name" style="font-size: 0.22rem; line-height: 0.30rem; color: #FFFFFF; font-weight: 600; margin-bottom: 0.04rem"></p>
                <p id="master-slogan" style="font-size: 0.16rem; line-height: 0.22rem; color: #FFFFFF; margin-bottom: 0.04rem"></p>
                <div class="flex" style="height: 0.17rem; align-items: center;">
                    <div class="time-icon"></div>
                    <p id="master-online" style="font-size: 0.12rem; line-height: 0.17rem; color: #FFFFFF;"></p>
                </div>
            </div>
        </div>
    </div>
    <div class="flex" style="width: 100%; height: auto; justify-content: center;">
        <div style="width: 3.43rem; border-radius: 0.055rem; overflow: hidden; background-color: #FDFDFD;">
            <div class="title-block">
                <p style="font-size: 0.20rem; line-height: 0.44rem; color:#643432; font-weight: 600; width: 100%; text-align: center;">擅  长</p>
            </div>
            <div id="master-skill" class="flex block" style="justify-content: center; align-items: center; flex-wrap: wrap; padding-top: 0.30rem; padding-bottom: 0.30rem">
                <!--<div style="width: 100%; height: 0.30rem;"></div>-->
            </div>
        </div>
    </div>
    <div class="flex" style="width: 100%; height: auto; justify-content: center; margin-top: 0.15rem">
        <div style="width: 3.43rem; border-radius: 0.055rem; overflow: hidden; background-color: #FDFDFD;">
            <div class="title-block">
                <p style="font-size: 0.20rem; line-height: 0.44rem; color:#643432; font-weight: 600; width: 100%; text-align: center;">大师简介</p>
            </div>
            <div class="block" style="padding: 0.27rem 0.21rem 0.17rem 0.21rem;">
                <p id="master-description"></p>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common/common.js"></script>
<script type="text/javascript" src="../../script/common/swiper/swiper.min.js"></script>
<script type="text/javascript">
    var masterImageEl, masterNameEl, masterSloganEl, masterOnlineEl, masterSkillEl, masterDescriptionEl;
    var masterInfo;
    var locked = 0;
    apiready = function () {
        $api.fixStatusBar( $api.byId('header') );
        masterImageEl = $api.byId('master-image');
        masterNameEl = $api.byId('master-name');
        masterSloganEl = $api.byId('master-slogan');
        masterOnlineEl = $api.byId('master-online');
        masterSkillEl = $api.byId('master-skill');
        masterDescriptionEl = $api.byId('master-description');

        getMasterInfo();
    }

    function getMasterInfo() {
        api.ajax({
            url: apiUrl + '/inquiry/master-detail',
            tag: '/inquiry/master-detail',
            method: 'get',
            data: {
                values: {
                    token: $api.getStorage("token"),
                    master_id: api.pageParam.master_id,
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 0) {
                    masterInfo = ret.data;
                    console.log(JSON.stringify(masterInfo))
                    $api.css(masterImageEl,'background-image: url(' + masterInfo['avatar'] + ');');
                    $api.text(masterNameEl, masterInfo['name']);
                    $api.text(masterSloganEl, masterInfo['slogan']);
                    $api.text(masterOnlineEl, masterInfo['online']);
                    $api.text(masterDescriptionEl, masterInfo['description']);

                    var masterSkill = masterInfo["skill"], skill = '';
                    for (var s=0,lens=masterSkill.length; s<lens; s++)
                    {

                        skill += '<div class="master-skill">' + masterSkill[s] + '</div>'
                    }
                    $api.append(masterSkillEl, skill);

                    locked = 1;
                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }

    function openMasterBookingWin() {
        if (locked == 1) {
            api.openWin({
                name: 'masterBookingWin',
                url: './masterBookingWin.html',
                slidBackType: 'edge',
                pageParam: {
                    master_id: api.pageParam.master_id,
                    name: masterInfo['name'],
                },
                animation: {
                    type:"movein",
                    subType:"from_right",
                    duration:300
                }
            });
        }
    }

    function openMasterImWin() {
        UIEaseChat = api.require('UIEaseChat');
        UIEaseChat.login({
            username: $api.getStorage('im_user_id'),
            password: $api.getStorage('im_pwd'),
            autoLogin: false
        },function(ret, err) {
            if (ret.status) {
                // api.alert({ msg:'登录成功'});
                UIEaseChat.configureChat({
                    hideLocation: true,
                });

                UIEaseChat.chat({
                    conversationId: masterInfo['im_user_id'],
                    chatType: 'chat',
                    callishidden: true,
                    hideVideo: false,
                    navigationBar:{
                        title: masterInfo['name'],
                        titleColor: '#231313',
                        bgColor: '#ffffff',
                        backColor: '#666666',
                    },
                    avatar: {
                        size: 50,
                        corner: 25,
                        local: "fs://avatar/result.png"
                    },
                    text: {
                        size: 14,
                        color: '#000'
                    },
                    location: {
                        size: 12,
                        color: '#fff'
                    },
                });
            } else {
                // api.alert({ msg:JSON.stringify(err)});
            }
        });
    }
</script>
